<template>
	<view>
		<view class="common-wrap tp-w690">
			<view class="common_tit-wrap">
				<view class="common_tit-wrap tp-w690">
					<view class="l-wrap">成员信息</view>
					<view class="r-wrap"></view>
				</view>
			</view>

			<view class="input-wrap">
				<view class="type">姓名</view>
				<view class="input">
					<input type="text" v-model="riderInfo.name" placeholder="请输入姓名" />
				</view>
			</view>

			<view class="input-wrap">
				<view class="type">性别</view>
				<picker mode="selector" :range="genderArrayList" @change="handleChooseGender">
					<view class="input">
						<input type="text" disabled v-model="riderInfo.gender" placeholder="请选择" />
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<view class="input-wrap">
				<view class="type">证件名称</view>
				<picker mode="selector" :range="IDNameArrayList" @change="handleChooseIDName">
					<view class="input">
						<input type="text" disabled v-model="riderInfo.IDName" placeholder="请选择" />
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<view class="input-wrap">
				<view class="type">证件号码</view>
				<view class="input">
					<input type="text" v-model="riderInfo.IDNumber" maxlength="18" minLength="18" placeholder="请输入证件号码" />
				</view>
			</view>

			<view class="input-wrap">
				<view class="type">手机号</view>
				<view class="input">
					<input type="number" v-model="riderInfo.phone" maxlength="11" placeholder="请输入手机号" />
				</view>
			</view>

			<view class="input-wrap">
				<view class="type">身份类型 <uni-icons v-if="riderInfo.riderType"  @click="goToFWb(riderInfo.riderType)" style="margin-left: 10rpx;" type="help" size="18"
					 color="#FFE594"></uni-icons>
				</view>
				<picker mode="selector" :range="riderTypeArrayList" @change="handleChooseRiderType">
					<view class="input">
						<input type="text" disabled v-model="riderInfo.riderType" placeholder="请选择" />
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

		</view>

		<!-- 班车时有这些数据 -->
		<view class="common-wrap tp-w690" v-if="scene == 0 && pType == 1 && (goType == 0 || backType == 0)">
			<view class="common_tit-wrap">
				<view class="common_tit-wrap tp-w690">
					<view class="l-wrap">航班信息</view>
					<view class="r-wrap"></view>
				</view>
			</view>

			<view v-if="goType == 0 || backType == 0" class="input-wrap">
				<view class="type">航班号</view>
				<!-- <picker mode="selector" :range="flightCompanyArrayList" @change="handleChooseFlightCompany"> -->
				<view class="input">
					<input type="text" v-model="flightInfo.name" placeholder="请填写" />
					<!-- <uni-icons type="arrowright" size="20" color="#999"></uni-icons> -->
				</view>
				<!-- </picker> -->
			</view>

			<view v-if="backType == 0" class="input-wrap" @click="handleChooseFlightDate">
				<view class="type">起飞时间</view>
				<view class="input">
					<input type="text" disabled v-model="flightInfo.startDate" placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view v-if="goType == 0" class="input-wrap" @click="handleChooseFlightDate">
				<view class="type">落地时间</view>
				<view class="input">
					<input type="text" disabled v-model="flightInfo.endDate" placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<view class="common-btn" @click="handleSubmitAddRider">确定</view>

		<w-picker mode="shortTerm" v-model="initChooseStartDate" :current="true" :hideBtn="true" expand="60" @confirm="handleConfirmChooseDate($event,'shortTerm', travelStatus)"
		 ref="shortTerm"></w-picker>

		<uni-popup ref="tipsPopup" :maskClick="false">
			<view class="tips_popup-wrap">
				<view class="tips-icon">
					<image src="@/static/imgs/icons/tips-icon.png" mode="aspectFill"></image>
				</view>
				<text class="tit">温馨提示</text>
				<text class="p">您购买的班次距离您起飞的时间很近 了，请确保有足够的时间抵达，以免耽误您的行程</text>
				<view class="btn" @click="handleConfirmTips">确定</view>
				<view class="close-icon" @click="handleConfirmTips">
					<uni-icons type="close" size="30" color="#ccc"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<Notice ref="notice" :noticeInfo="noticeInfo" :isbtn="true"></Notice>
	</view>
</template>

<script>
	import Notice from '@/components/common/notice.vue'
	export default {
		components: {
			Notice
		},
		data() {
			return {
				riderInfo: { // 乘车人信息
					id: 0,
					name: '',
					gender: '',
					IDName: '',
					IDNumber: '',
					phone: '',
					riderType: '',
				},
				shiftsId: '', // 班次id
				flightInfo: { // 航班信息
					name: '',
					startDate: '',
					startDateObj: {}, // 起飞时间
					endDate: '',
					endDateObj: {} // 落地时间
				},
				genderArrayList: ['未知', '男', '女'], // 性别picker
				IDNameArrayList: ['身份证'], // 证件picker
				IDNameList: [], // 证件picker(详细信息)
				riderTypeArrayList: [], // 乘客类型picker
				riderTyperList: [], // 乘客类型picker(详细信息)
				flightCompanyArrayList: ['厦航', '美航', '澳航'], // 航空公司picker
				initChooseStartDate: '', //
				scene: '', // 场景类型 0.班车 1.接车
				pType: '1', // 0.常用联系人 1.所有
				goType: '', //   出发站是否是机场 0.是 1.否
				backType: '', // 	终点站是否是机场 0.是 1.否
				
				noticeInfo: {}, // 身份类型文本说明
			};
		},
		onLoad(opt) {
			// console.log(opt);
			this.riderInfo.id = opt && opt.id
			this.shiftsId = opt && opt.shiftsId
			this.scene = opt && opt.scene
			this.goType = opt && opt.goType
			this.backType = opt && opt.backType
			if (opt.pType) {
				this.pType = opt.pType
			} else {
				this.pType = '1'
			}
			this.scene = opt && opt.scene
			this.getRiderType()
			this.getCardsType()

		},
		onShow() {
			// this.$refs.tipsPopup.open()
		},
		methods: {
			handleChooseGender(e) {
				const i = e.detail.value
				this.riderInfo.gender = this.genderArrayList[i]
			},
			handleChooseIDName(e) {
				const i = e.detail.value
				this.riderInfo.IDName = this.IDNameArrayList[i]
			},
			handleChooseRiderType(e) {
				const i = e.detail.value
				this.riderInfo.riderType = this.riderTypeArrayList[i]
			},
			handleChooseFlightCompany(e) {
				const i = e.detail.value
				this.flightInfo.name = this.flightCompanyArrayList[i]
			},
			handleChooseFlightDate() {
				let date = new Date()
				let formatNum = this.formatNum
				const year = date.getFullYear()
				const month = formatNum(date.getMonth() + 1);
				const day = formatNum(date.getDate());
				let hours = formatNum(date.getHours());
				let minutes = formatNum(date.getMinutes());
				let arr = []
				for (let i = 0; i < 12; i++) {
					arr.push(i * 5)
				}
				minutes = formatNum(arr.find((el) => el > minutes)) !== 'undefined' ? formatNum(arr.find((el) => el > minutes)) :
					'00'
				if (!Number(minutes)) {
					hours = formatNum(Number(hours) + 1);
				}
				this.initChooseStartDate = `${year}-${month}-${day} ${hours}:${minutes}`
				this.$refs.shortTerm.show()
			},
			handleConfirmChooseDate(e) {
				// console.log(e);
				if (this.backType == 0) { // 终点站否是机场 0.是 1.否  填写起飞时间
					this.flightInfo.startDate = e.value
					this.flightInfo.startDateObj = e.obj
				}
				if (this.goType == 0) { // 出发站是否是机场 0.是 1.否填写落地时间
					this.flightInfo.endDate = e.value
					this.flightInfo.endDateObj = e.obj
				}

			},
			handleConfirmTips() {
				this.$refs.tipsPopup.close()
			},
			handleSubmitAddRider() { // 提交添加乘车人信息
				let {
					name,
					gender,
					IDName,
					IDNumber,
					phone,
					riderType
				} = this.riderInfo
				let regexPhone = this.$regexPhone
				let regexID = this.$regexID
				if (!name.trim()) return uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				if (!gender.trim()) return uni.showToast({
					title: '请选择性别',
					icon: 'none'
				});
				if (!IDName.trim()) return uni.showToast({
					title: '请选择证件名称',
					icon: 'none'
				});
				if (!IDNumber.trim()) return uni.showToast({
					title: '请正确填写证件号码',
					icon: 'none'
				});
				if (!regexPhone.test(phone.trim())) return uni.showToast({
					title: '请正确填写手机号',
					icon: 'none'
				});
				if (!riderType) return uni.showToast({
					title: '请选择乘客类型',
					icon: 'none'
				});

				let sex = gender == '未知' ? 0 : gender == '男' ? 1 : 2
				console.log(sex);
				let fareType = 1
				let IDid = 1
				let departureTime = ''
				let landTime = ''
				if (this.scene == 0 && this.backType == 0) {
					// else 
					if (this.flightInfo.startDateObj.date) {
						departureTime = this.flightInfo.startDateObj.date + ' ' + this.flightInfo.startDateObj.hour + ':' + this.flightInfo
							.startDateObj.minute + ':00'
						if (this.flightInfo.startDateObj.date.value) {
							departureTime = this.flightInfo.startDateObj.date.value + ' ' + this.flightInfo.startDateObj.hour.value + ':' +
								this.flightInfo.startDateObj.minute.value + ':00'
						}
					} else {
						departureTime = ''
					}
				}
				if (this.scene == 0 && this.goType == 0) {
					// else 
					if (this.flightInfo.endDateObj.date) {
						landTime = this.flightInfo.endDateObj.date + ' ' + this.flightInfo.endDateObj.hour + ':' + this.flightInfo.endDateObj
							.minute + ':00'
						if (this.flightInfo.endDateObj.date.value) {
							landTime = this.flightInfo.endDateObj.date.value + ' ' + this.flightInfo.endDateObj.hour.value + ':' + this.flightInfo
								.endDateObj.minute.value + ':00'
						}
					} else {
						landTime = ''
					}
				}

				this.riderTyperList.forEach(item => {
					if (item.typeName == riderType) {
						fareType = item.id
					}
				})
				this.IDNameList.forEach(item => {
					if (item.name == IDName) {
						IDid = item.id
					}
				})
				let api = this.$api.addRider + '?scene=' + this.scene + '&pType=' + this.pType
				if (this.riderInfo.id != 'undefined') {
					api = this.$api.addRider + '?passengerId=' + this.riderInfo.id + '&scene=' + this.scene + '&pType=' + this.pType
				}
				this.$http.post(api, {
					passengerName: name,
					phone,
					sex,
					certificateType: IDid, // "证件类型（0护照，1身份证）"
					certificateNumber: IDNumber, //  "证件号码"
					fareType, // " 乘客类型（1成人，2儿童）"
					airline: this.flightInfo.name || '无', // "航空公司"
					// departureTime: this.flightInfo.date || '无',// "起飞时间  yyyy-MM-dd HH:mm:ss"
					departureTime: departureTime, // "起飞时间  yyyy-MM-dd HH:mm:ss"
					landTime: landTime, // "起飞时间  yyyy-MM-dd HH:mm:ss"

				}).then(res => {
					if (res.code === 200) {
						uni.navigateBack({
							delta: 1
						});
						let arr_local = this.$store.getters.getRiderList
						let arr_net = []

						this.$http.get(this.$api.getRiderList + '?shiftsId=' + (this.shiftsId || '') + '&scene=' + this.scene +
							'&pType=' + this.pType).then(res => { // 后台获取乘车人最新信息
							if (res.code === 200) {
								res.data.result.map(item => {
									item.ID = item.idNumber || item.certificateNumber
									item.name = item.passengerName || item.name
									item.choosed = false
								})
								arr_net = res.data.result
								arr_local.forEach((it_l, in_l) => {
									arr_net.forEach((it_n, in_n) => {
										if (it_l.id === it_n.id) {
											this.$store.commit('upRiderList', it_n) // 更新本地乘车人信息
										}
									})
								})
							}
						})
					}

				})
			},
			formatNum(num) {
				return String(num).padStart(2, '0')
			},
			// 获取乘客类型
			getRiderType() {
				this.$http.get(this.$api.getRiderType).then(res => {
					if (res.code === 200) {
						this.riderTyperList = res.data
						res.data.forEach((item, i) => {
							this.riderTypeArrayList[i] = item.typeName
						})
					}
					if (this.riderInfo.id != 'undefined') {
						uni.setNavigationBarTitle({
							title: '编辑乘车人'
						})
						this.getRiderInfo()
					}
				})
			},
			// 乘客证件类型选择
			getCardsType() {
				this.$http.get(this.$api.getCardsType).then(res => {
					if (res.code === 200) {
						this.IDNameList = res.data
						res.data.forEach((item, i) => {
							this.IDNameArrayList[i] = item.name
						})
					}
				})
			},
			getRiderInfo() {
				this.$http.get(this.$api.editRider + '?passengerId=' + this.riderInfo.id + '&pType=' + this.pType).then(res => {
					if (res.code === 200) {
						let {
							airline,
							departureTime,
							certificateNumber,
							certificateType,
							fareType,
							passengerName,
							phone,
							typeName,
							sex
						} = res.data
						this.riderInfo.gender = sex == 0 ? '未知' : sex == 1 ? '男' : '女'
						this.riderInfo.name = passengerName
						this.IDNameList.forEach(item => {
							if(certificateType == item.id){
								this.riderInfo.IDName = item.name
							}
						})
						// this.riderInfo.IDName = certificateType == 0 ? '身份证' : '身份证'
						this.riderInfo.IDNumber = certificateNumber
						this.riderInfo.phone = phone
						// this.riderInfo.riderType = fareType
						this.riderTyperList.forEach(item => {
							let t = fareType
							if (item.id == t) {
								this.riderInfo.riderType = item.typeName
							}
						})
					}
				})
			},
			getRiderList() { // 后台获取数据库乘车人最新信息
				this.$http.get(this.$api.getRiderList + '?shiftsId=' + this.shiftsId + '&scene=' + this.scene + '&pType=' + this.pType)
					.then(res => {
						if (res.code === 200) {
							res.data.map(item => {
								item.ID = item.idNumber
								item.choosed = false
							})
							return res.data
						}
					})
			},
			//去富文本页面
			goToFWb(typeName) {
				let typeDescription = ''
				this.riderTyperList.forEach(item => {
					if(typeName == item.typeName){
						typeDescription = item.typeDescription
					}
				})
				this.noticeInfo = {textTitle:typeName + '说明', context: typeDescription}
				this.$refs.notice.show()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.common_tit-wrap {
		.l-wrap {
			font-size: 28rpx;
			font-weight: 500;
		}
	}

	.common-wrap {
		border-radius: 12rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
	}

	.input-wrap {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;

		&:last-child {
			border: none;
		}

		.type {
			font-size: 30rpx;
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: 30rpx;
			display: flex;

			input {
				padding-right: 6rpx;
			}
		}
	}

	.tips_popup-wrap {
		width: 560rpx;
		margin: 0 auto;
		padding: 50rpx 0;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.tips-icon {
			width: 194rpx;
			height: 196rpx;
		}

		.tit {
			font-size: 34rpx;
			padding-top: 40rpx;
		}

		.p {
			font-size: 26rpx;
			padding: 20rpx 73rpx 60rpx;
			line-height: 50rpx;
		}

		.btn {
			width: 480rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			background: $blue;
			border-radius: 10rpx;
		}

		.close-icon {
			position: absolute;
			top: -30rpx;
			right: -30rpx;
		}
	}

	.common-btn {
		width: 580rpx;
		box-shadow: none;
		margin-top: 80rpx;
	}
</style>
